<template>
  <div>
    <div class="ss">
      <van-icon
        class="pre"
        color="#fff"
        size="30px"
        name="arrow-left"
        @click="onClickLeft"
      />
      <van-icon
        name="arrow-down"
        class="down"
        @click="$router.push('/lisout')"
      />
      <button>北京</button>
      <input type="text" value="请输入小区地址" />
      <van-icon class="s" name="search" size="20" color="#9c9fa1" />
    </div>

    <div class="qq"></div>
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>

    <van-popup
      v-model="show"
      get-container="body"
      position="top"
      :style="{ height: '50%' }"
      ><van-picker show-toolbar title="标题" :columns="columns"
    /></van-popup>
    <!-- <div class="dd">
      <van-picker show-toolbar title="标题" :columns="columns" />
    </div> -->
    <!-- <beach-umbrella theme="outline" size="24" fill="#333" /> -->

    <HelloCase :list="list"></HelloCase>
  </div>
</template>
<script>
import HelloCase from '@/components/HelloCase.vue'
import { lo, cha } from '@/api/luo'
import { mapState } from 'vuex'
// import axios from 'axios'
// import { xian } from '@/api/luo'
export default {
  components: {
    HelloCase
  },
  data () {
    return {
      show: false,

      list: [],
      columns: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1
        }
      ]
    }
  },
  computed: {
    ...mapState('user', ['name'])
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onClickLeft () {
      this.$router.go(-1)
    }
    // getContainer () {
    //   return document.querySelector('.qq')
    // }
  },

  async created () {
    const data = await cha(name)
    console.log(data)

    const res = await lo()
    const { body } = res
    // console.log(body)
    // console.log(res)
    this.list = [...this.list, ...body]
  }
}
// AREA|88cff55c-aaa4-e2e0
// AREA|14786479-ddb5-1bf2
// }
</script>

<style scoped lang="less">
.dd {
  height: 40px;
  background-color: #9c9fa1;
}
.ss {
  height: 40px;
  width: 310px;
  display: flex;
  position: absolute;
  top: 7px;
  // border: 1px solid red;
  left: 25px;
  padding-left: 10px;
  .pre {
    position: absolute;
    top: 6px;
    left: -20px;
  }
  .down {
    position: absolute;
    top: 14px;
    left: 60px;
  }
  button {
    height: 100%;
    background-color: #fff;
    border: none;
    padding-right: 40px;
    padding-left: 10px;
  }
  input {
    height: 37px;
    flex: 1;
    border: none;
    color: #9c9fa1;
    padding-left: 30px;
  }
  .s {
    position: absolute;
    top: 10px;
    left: 100px;
  }
}
.qq {
  height: 50px;
  background-color: #21b97a;
}
</style>
